<template>
  <van-list class="goodslist_box" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <li v-for="goods in goodslist" :key="goods.proid" @click="goGoods(goods.proid)">
      <img :src="goods.img1" />
      <p>{{goods.proname}}</p>
      <span>￥{{goods.originprice}}元</span>
    </li>
  </van-list>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      pageIndex: 1,
      loading: false,
      finished: false,
      goodslist: []
    }
  },
  methods: {
    onLoad() {
      this.$service({
        url: 'pro/list',
        params: {
          count: this.pageIndex,
          limitNum: 8
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.goodslist = [...this.goodslist, ...res.data.data],
              this.loading = false;
            this.pageIndex++
          }
        })
        .catch(err => {
          console.log('err', err);
        })
    },
    goGoods(proid) {
      // 采用query的且使用字符串的形式进行跳转
      // console.log(proid);
      this.$router.push('/goods?id=' + proid)
    }
  },
}
</script>

<style scoped>
.goodslist_box {
  flex: 1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goodslist_box li {
  width: 48%;
  margin-bottom: .625rem;
}

.goodslist_box li img {
  width: 100%;
}

/* 从第二行开始多处部分省略 */
.goodslist_box li p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goodslist_box li span {
  color: red;
}
</style>